<template>
  <li class="card-item">
    <div class="card">
      <div class="img-wrap">
        <img :src="require(`../../../assets/img/${item.name}.jpg`)" :alt="item.name" />
        <div class="mask">
          <h1>{{ item.name }}</h1>
          <h2>{{ item.festival }}</h2>
        </div>
      </div>
      <div class="content-wrap">
        <h1>假期描述：{{ item.desc || "无说明" }}</h1>
        <h2>拼假建议：{{ item.rest || "无说明" }}</h2>
      </div>
    </div>
  </li>
</template>

<script>
import { ref } from "vue";
export default {
  name: "cardItem",
  props: {
    item: Object,
  },
  setup(prop) {
    console.log("qwe", prop);
  },
};
</script>

<style lang="scss" scoped>
.card-item {
  width: 90%;
  margin: auto;
  margin-bottom: 20px;
  border: 1px solid #acacac;
  box-shadow: 10px 10px 5px #888888;
  .img-wrap {
    height: 240px;
    position: relative;
    img {
      height: 240px;
      width: 100%;
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      background-color: #34343477;
      padding-top: 70px;
      h1 {
        color: orange;
        font-size: 32px;
        font-weight: 600;
      }
      h2 {
        margin-top: 10px;
        font-size: 24px;
        color: #fff;
      }
    }
  }
  .content-wrap {
    padding: 10px;
  }
}
</style>
